<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Chapter8首页</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <style>
                body {
                    background-image:none;
                    color: red;
                }
                header,li{
                    background-color:#000;
                }

                .bgcolor{width:100px;height:20px;background-color:rgba(100,200,100,0.4)}
                .bgcolor2{width:100px;height:20px;background-color:rgba(100,200,100,0.9)}
                .bgimg{width:300px;height:300px;background-image:url("index2.jpeg");}
                .bgimgrepeat{
                    width:300px;height:300px;background-image:url("index2.jpeg");background-repeat: repeat-y;
                }
                .positioncenter{
                    width:100px;
                    height:100px;
                    border:1px solid #000;
                    background-image:url("index2.jpeg");
                    background-repeat: no-repeat;
                    background-position: right bottom;
                }
                .bgcomplex{
                    width:200px;
                    height:100px;
                    background:#abcdef url("index2.jpeg") no-repeat left center;
                }
                .bgimgsize{
                    border:1px solid #000;
                    width:300px;
                    height:200px;
                    background-image:url("shan.jpg");
                    background-size:200px;
                    background-repeat: no-repeat;
                }
                .bgimgsize2{
                    border:1px solid #000;
                    width:200px;
                    height:200px;
                    background-image:url("shan.jpg");
                    background-size:cover;
                    background-repeat: no-repeat;
                }
                .bgimgsize3{
                    border:1px solid #000;
                    width:400px;
                    height:200px;
                    background-image:url("shan.jpg");
                    background-size:contain;
                    background-repeat: no-repeat;
                }
                .bgimgorigin{
                    border:1px solid #000;
                    width:400px;
                    height:200px;
                    padding:20px;
                    background-image:url("shan.jpg");
                    background-size:400px;
                    background-repeat: no-repeat;
                    background-origin: content-box;
                }
                .bgimgorigin2{
                    border:1px solid #000;
                    width:400px;
                    height:200px;
                    padding:20px;
                    background-image:url("shan.jpg");
                    background-size:400px;
                    background-repeat: no-repeat;
                    background-origin: border-box;
                }
                .bgimgorigin2{
                    border:1px solid #000;
                    width:400px;
                    height:200px;
                    padding:20px;
                    background-image:url("shan.jpg");
                    background-size:400px;
                    background-repeat: no-repeat;
                    background-origin: border-box;
                }
                .bgimgclip {
                    width:200px;
                    border: 10px dotted black;
                    padding:35px;
                    background: yellow;
                }

                .bgimgclip2 {
                    width:200px;
                    border: 10px dotted black;
                    padding:35px;
                    background: yellow;
                    background-clip: padding-box;
                }

                .bgimgclip3 {
                    width:200px;
                    border: 10px dotted black;
                    padding:35px;
                    background: yellow;
                    background-clip: content-box;
                }
                .bgcolorlinear{
                    width:300px;
                    height:300px;
                    background-image:linear-gradient(90deg,red,blue,green);
                }
                .bgcolorradial{
                    width:300px;
                    height:300px;
                    background-image:radial-gradient(circle at 150px 150px,red,blue,green);
                }

                .bgcolorrepeat{
                    width:600px;
                    height:300px;
                    background-image:repeating-linear-gradient(45deg,red 0px,red 10px,white 10px,white 20px);
                }
                .bgmore{
                    width:600px;
                    height:600px;
                    background-image:url("shan.jpg"),url("index.jpeg");
                    background-repeat:no-repeat;
                    background-position: left top,right center;
                    background-size:300px,100px;
                }
            </style>
    </head>
    <body>
            <header>
                <div id="header">HTML5开发</div>
                <div id="right"><a href="">注册</a>&nbsp;|&nbsp;<a href="">登录</a></div>
                
            </header>
        <nav>
            <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="1.html">字体样式</a></li>
                    <li><a href="2.html">列表样式设置</a></li>
                    <li><a href="3.html" class="active">背景样式设置</a></li>
                    <li><a href="4.html">固定背景</a></li>
            </ul>
        </nav>
        <hr class="navline">
        <div id="content">
            <div class="bgcolor">

            </div>
            <br>
            <div class="bgcolor2">

            </div>
            <br>
            <div class="bgimg">

            </div>
            <br>
            <div class="bgimgrepeat">

            </div>
            <br>
            <div class="positioncenter">

            </div>
            <br>
            <div class="bgcomplex">

            </div>
            <br>
            <div class="bgimgsize">

            </div>
            <br>
            <div class="bgimgsize2">

            </div>
            <br>
            <div class="bgimgsize3">

            </div>
            <br>
            <div class="bgimgorigin">

            </div>
            <br>
            <div class="bgimgorigin2">

            </div>
            <br>
            <div class="bgimgclip">
            
            </div>
            <br>
            <div class="bgimgclip2">
            
            </div>
            <br>
            <div class="bgimgclip3">
                sdfdsfds
            </div>
            <br>
            <div class="bgcolorlinear">

            </div>
            <br>
            <div class="bgcolorradial">

            </div>
            <br>
            <div class="bgcolorrepeat">

            </div>
            <div class="bgmore">

            </div>
            <div class="bgcolorrepeat2" style="width:300px;height:300px;background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);">

            </div>
            <br>
            <div style="width:300px;height:300px;background: repeating-radial-gradient(circle , red, black 5%, blue 5%, green 10%);">
            </div>
        </div>
        <footer>

        </footer>
    </body>
</html>